<template>
	<view>
		<view class="w90" style="margin-top: 32rpx;">
			<h5 class="fs14">我要反馈</h5>
			<textarea class="fs12 texts" style="" value="" placeholder="请描述遇到的问题..." />
			<view style="margin-top: 32rpx;height: 500rpx;overflow: hidden;">
				<h5 class="fs14">图片展示</h5>
				<view class="imgs" style="margin-top: 80rpx;display: flex;">
					<!-- <view class="wrap"> -->
						<view class="pre-box" v-if="!showUploadList">
							<view class="pre-item" v-for="(item, index) in lists" :key="index">
								<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
						<u-upload style="width: 132rpx;" :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action"> 
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="66">
								<u-icon name="photo" size="60" color="#c0c4cc"></u-icon>
							</view>
						</u-upload>
					<!-- </view> -->
				</view>
			</view>
			<view class="TJ" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com', // 演示地址
				showUploadList: false, 
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: []
			}
		},
		methods: {
			
		},
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
			this.lists = this.$refs.uUpload.lists;
		}
	}
</script>

<style>
	.w90 {
		width: 90%;
		margin: 0 auto;
	}

	.texts {
		height: 260rpx;
		margin-top: 28rpx;
		padding: 40rpx;
		background: rgba(246, 246, 246, 1);
	}

	.imgs {
		width: 100%;
		flex-wrap: wrap;
	}

	.delete {
		width: 40rpx !important;
		height: 40rpx !important;
		position: absolute;
		right: -15rpx;
		top: -15rpx;
	}

	.imgs image {
		width: 132rpx;
		height: 132rpx;
		margin: 20rpx 15rpx;
	}

	.TJ {
		width: 406rpx;
		height: 80rpx;
		background: #26c384;
		text-align: center;
		line-height: 80rpx;
		border-radius: 15rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.wrap {
			padding: 24rpx;
			display: flex;
		}
		
		.slot-btn {
			width: 132rpx;
			height: 132rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
	
		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
	
		.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	
		.pre-item {
			display: flex;
			border-radius: 10rpx;
			height: 140rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
		}
	
		.pre-item-image {
			width: 132rpx;
			height: 132rpx;
		}
</style>
